<template>
  <div class="container">
    <!-- 这是注释 -->
    <h2>我的项目</h2>
    <p>{{ age }}</p>

    <!-- 事件绑定：用法一，事件处理程序，如果只是简单的语句，可以直接写到属性值中 -->
    <!-- 注意事项：事件处理代码，只能使用vue相关的代码 【比如console.log()不行，因为它不是vue封装的对象】 -->
    <button v-on:click="age++">age+1</button>
    <button @click="age++">age+1</button>

    <hr>
    <!-- 事件绑定：用法二，事件处理程序，使用方法 -->
    <!-- 事件处理方法，必须定义到 和 data 平级的 methods 中 -->
    <button @click="changeAge">让age-1</button>
  </div>
</template>

<script>
export default {
  // 这里放vue相关代码
  data () {
    return {
      // 把所有的数据，都放到这里
      age: 20
    }
  },
  methods: {
    方法1 () {},
    方法2 () {},
    changeAge () {
      // console.log(123)
      // 如果找其他的数据、方法，使用统一的语法，this
      this.age--
    }
  }
}
</script>

<style>
h2 {
  color: red;
}
</style>